<template>
	<el-container>
		<el-container>
			<el-header>
				<div class="left-panel">
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="params.castingName" placeholder="NFT名称" clearable style="width: 200px"/>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable tableName="templateList" ref="table" :apiObj="apiObj" :column="column"
						 @selection-change="selectionChange" stripe :params="params">

					<template #id="scope">
						<el-button @click="table_show(scope.row, scope.$index)" type="text">{{scope.row.id}}
						</el-button>
					</template>

					<template #castingName="scope">
						<el-tooltip
							class="box-item"
							effect="dark"
							:content="scope.row.castingName"
							placement="top-start"
						>
							<p style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap">{{scope.row.castingName}}</p>
						</el-tooltip>
					</template>

					<!-- 固定列-选择列 -->
					<el-table-column type="selection" width="50" fixed/>

				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="info" :size="800" custom-class="drawerBG" direction="rtl" destroy-on-close title="详情信息">
		<info></info>
	</el-drawer>

</template>

<script>
	import scStatistic from '@/components/scStatistic';
	import scFilterBar from '@/components/scFilterBar';
	import info from './info'

	export default {
		name: 'list',
		components: {
			scStatistic,
			scFilterBar,
			info
		},
		data() {
			return {
				apiObj: this.$API.operate.order.transactionRecord,
				column: [
					{
						label: "NFT ID",
						prop: "castingId",
						width: "200",
						sortable: true
					},
					{
						label: "NFT名称",
						prop: "castingName",
						width: "200"
					},
					{
						label: "拥有者",
						prop: "owner",
						width: "200"
					},
					{
						label: "发行方",
						prop: "issuer",
						width: "200"
					},
					{
						label: "交易方式",
						prop: "type",
						width: "200"
					},
					{
						label: "创建时间",
						prop: "createTime",
						width: "200"
					}
				],
				selection: [],
				list: [],
				info: false,
				params: {
					name: ''
				}
			}
		},
		mounted() {
		},
		methods: {
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection;
			},
			add() {
				this.$router.push({
					path: `/good/save`
				});
			},
			table_show(row, index) {
				this.info = true;
				this.id = row.id
			},
			table_edit(row) {
				this.$router.push({
					path: `/good/save`,
					query: {
						id: row.id,
						mode: 'edit',
						type: row.castingType
					}
				});
			},
			filterHandler(value, row, column) {
				const property = column.property;
				return row[property] === value;
			},
			change(data) {
				console.log(data);
			},
			//搜索
			upsearch() {
				this.$refs.table.reload(this.params)
			},
			/**
			 * 上下架
			 */
			async changeUpDown(row) {
				let res = this.$API.publish.nft.changeCollectionStatus.post({id: row.id, status: row.onTheShelf})
				console.log(res)
			}
		}
	}
</script>

<style></style>
